<template>
  <div class="app-container">
    <h2 class="show">{{ course_name }}</h2>
    <span>{{ course_stime+" 到 " }}</span>
    <span>{{ course_etime }}</span>

    <el-tabs
      v-model="activeName"
      @tab-click="handleClick"
    >
      <el-tab-pane label="学员管理" name="first">
        <user-setting v-if="isFirst" />
      </el-tab-pane>
      <el-tab-pane label="分组表" name="second">
        <grouping v-if="isSecond" />
      </el-tab-pane>
      <el-tab-pane label="排座" name="third">
        <edit-seat v-if="isThird" />
      </el-tab-pane>
      <el-tab-pane label="课程作业" name="fourth">
        <homework v-if="isFourth" />
      </el-tab-pane>
      <el-tab-pane label="考勤" name="fifth">
        <kaoqin v-if="isFifth" />
      </el-tab-pane>
      <el-tab-pane label="课件" name="sixth">
        <kejian v-if="isSixth" />
      </el-tab-pane>
      <el-tab-pane label="考核方式" name="seventh">
        <kaohe v-if="isSeventh" />
      </el-tab-pane>
      <el-tab-pane label="课程调查" name="eighth">
        <pinggu v-if="isEighth" />
      </el-tab-pane>
    </el-tabs>

  </div>
</template>

<script>
import { courseTimetablePage } from '@/api/course'
import EditSeat from '../../components/timetableDetail/editSeat.vue'
import UserSetting from '../../components/timetableDetail/userSetting.vue'
import Grouping from '../../components/timetableDetail/grouping.vue'
import Homework from '../../components/timetableDetail/homwork.vue'
import Kaoqin from '../../components/timetableDetail/kaoqin.vue'
import Kejian from '../../components/timetableDetail/kejian.vue'
import Kaohe from '../../components/timetableDetail/kaohe.vue'
import Pinggu from '../../components/timetableDetail/pinggu.vue'

export default {
  components: {
    EditSeat,
    UserSetting,
    Grouping,
    Homework,
    Kaoqin,
    Kejian,
    Kaohe,
    Pinggu
  },
  data() {
    return {
      list: [{}],
      course_timetable_id: '',
      course_name: '',
      course_stime: '',
      course_etime: '',
      activeName: 'first',
      isFirst: true,
      isSecond: false,
      isThird: false,
      isFourth: false,
      isFifth: false,
      isSixth: false,
      isSeventh: false,
      isEighth: false,
      listQuery: { // 查询初始值
        page: 1,
        limit: 10,
        id: this.$route.query.id
      }
    }
  },
  created() {
    this.course_timetable_id = this.$route.query.id
    this.activeName = this.$route.query.tab
    this.getList()
    this.handleClick({ name: this.$route.query.tab })
  },

  methods: {
    getList() {
      courseTimetablePage(this.listQuery).then(response => {
        this.list = response.data
        this.course_name = response.data[0].courseInfo.name
        this.course_stime = response.data[0].stime.slice(0, 10)
        this.course_etime = response.data[0].etime.slice(0, 10)
      })
    },
    handleClick(tab) {
      if (tab.name === 'first') {
        this.isFirst = true
        this.isThird = false
        this.isSecond = false
        this.isFourth = false
        this.isFifth = false
        this.isSixth = false
        this.isSeventh = false
        this.isEighth = false
      } else if (tab.name === 'second') {
        this.isFirst = false
        this.isSecond = true
        this.isFourth = false
        this.isFifth = false
        this.isSixth = false
        this.isSeventh = false
        this.isEighth = false
      } else if (tab.name === 'third') {
        this.isFirst = false
        this.isSecond = false
        this.isThird = true
        this.isFourth = false
        this.isFifth = false
        this.isSixth = false
        this.isSeventh = false
        this.isEighth = false
      } else if (tab.name === 'fourth') {
        this.isFirst = false
        this.isSecond = false
        this.isThird = false
        this.isFourth = true
        this.isFifth = false
        this.isSixth = false
        this.isSeventh = false
        this.isEighth = false
      } else if (tab.name === 'fifth') {
        this.isFirst = false
        this.isSecond = false
        this.isThird = false
        this.isFourth = false
        this.isFifth = true
        this.isSixth = false
        this.isSeventh = false
        this.isEighth = false
      } else if (tab.name === 'sixth') {
        this.isFirst = false
        this.isSecond = false
        this.isThird = false
        this.isFourth = false
        this.isFifth = false
        this.isSixth = true
        this.isSeventh = false
        this.isEighth = false
      } else if (tab.name === 'seventh') {
        this.isFirst = false
        this.isSecond = false
        this.isThird = false
        this.isFourth = false
        this.isFifth = false
        this.isSixth = false
        this.isSeventh = true
        this.isEighth = false
      } else if (tab.name === 'eighth') {
        this.isFirst = false
        this.isSecond = false
        this.isThird = false
        this.isFourth = false
        this.isFifth = false
        this.isSixth = false
        this.isSeventh = false
        this.isEighth = true
      }
    }
  }
}
</script>

<style scoped>
.show{
  display: inline;
  margin-right: 20px;
}
</style>

